<template>
  <div>
    <nav-bra-edit></nav-bra-edit>
    <van-address-edit
      :area-list="areaList"
      :address-info="user"
      show-delete
      show-set-default
      show-search-result
      
      tel-maxlength="11"
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
    />
  </div>
</template>

<script>
import Vue from "vue";
import { AddressEdit } from "vant";
import { areaList } from "@vant/area-data";
import { delAddress, updateAddress } from "../../apis/address";
import NavBraEdit from "./NavBraEdit.vue";

Vue.use(AddressEdit);

export default {
  components: { NavBraEdit },
  name: "EditAddress",

  data() {
    return {
      areaList,
      searchResult: [],
      user: JSON.parse(localStorage.getItem("address")),
    };
  },

  mounted() {},

  methods: {
    async onSave(content) {
      await updateAddress({
        userid: localStorage.getItem("userid"),
        name: content.name,
        tel: content.tel,
        province: content.province,
        city: content.city,
        county: content.county,
        addressDetail: content.addressDetail,
        isDefault: content.isDefault,
        addressid: this.$route.params.addressid,
      }).then();
      localStorage.setItem("address", JSON.stringify(content));
      this.$router.push("/address");
    },
    async onDelete() {
      await delAddress({ addressid: this.$route.params.addressid }).then();
      this.$router.push("/address");
    },
  },
};
</script>

<style  scoped>
</style>